<template>
  <div>
    <van-nav-bar
      title="二手"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-icon name="ellipsis" />
      </template>
    </van-nav-bar>
    <div>
      <van-row style="padding:10px">
        <van-col span="3">
          <van-image
            width="1.0rem"
            height="1.0rem"
            :src="'apis/kuan_api/photo/'+trade.user_img"
            round
          />
        </van-col>
        <van-col span="17">
          <p style="margin:5px;font-size:15px">{{trade.user_nickname}}</p>
          <p style="margin:5px">{{trade.sendtime}}</p>
        </van-col>
        <van-col span="4">
          <van-button
            type="primary"
            round
            style="width:60px;height:25px"
          >关注</van-button>
        </van-col>
      </van-row>
      <div style="padding:10px">
        <p style="margin:7px">
          <van-tag type="danger">{{trade.identity}}</van-tag> <b>{{trade.title}}</b>
        </p>
        <p style="color:red;font-size:20px;margin:7px">￥{{trade.price}}</p>
        <div class="shop_info">
          <p>商品信息</p>
          <div class="info">
            <p style="width:48%;padding-left:5px">机型：{{product.ProductName}}</p>
            <p style="width:48%;padding-left:5px">颜色：{{trade.color}}</p>
            <p style="width:48%;padding-left:5px">运行内存：{{trade.yunxing}}</p>
            <p style="width:48%;padding-left:5px">容量：{{trade.rongliang}}</p>
            <p style="width:48%;padding-left:5px">成色：{{trade.chengse}}</p>
            <div>

            </div>
          </div>
        </div>

        <p>{{trade.info}}</p>
        <div>
          <van-image
            :src="'apis/kuan_api/trade/'+trade.filelist"
            fit="contain"
          />
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="bottom">
      <van-row style="padding:10px">
        <van-col
          span="3"
          class="icon_box"
        >
          <van-icon
            name="chat-o"
            class="icon"
          />
        </van-col>
        <van-col
          span="3"
          class="icon_box"
        >
          <van-icon
            name="good-job-o"
            class="icon"
          />
        </van-col>
        <van-col
          span="3"
          class="icon_box"
        >
          <van-icon
            name="star-o"
            class="icon"
          />
        </van-col>
        <van-col
          span="6"
          class="icon_box"
        >
          <van-icon
            name="share-o"
            class="icon"
          />
        </van-col>
        <van-col span="9">
          <van-button
            v-if="trade.IsSale!=1 && trade.user_id !=$store.state.user.user_id"
            type="primary"
            class="btn"
            @click="buy(trade.OrderNum)"
          >购买</van-button>
          <van-button
            v-else-if="trade.IsSale==1"
            class="btn"
            disabled
          >已出售</van-button>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "tradedetail",
  data() {
    return {
      trade: [],
      orderid: "",
      product: [],
      productid: "",
    };
  },
  methods: {
    onClickLeft() {
      window.history.go(-1);
    },
    getdetail() {
      this.axios
        .post("apis/kuan_api/searchtrade.php", {
          code: 2,
          OderID: this.orderid,
        })
        .then((res) => {
          console.log(res.data.info);
          this.trade = res.data.info[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // 获取模块
    getmodule() {
      this.axios
        .post("apis/kuan_api/getproduct.php", {
          productid: this.productid,
        })
        .then((res) => {
          this.product = res.data.product[0];
        });
    },
    // 购买
    buy(OrderNum) {
      if (this.$store.state.user.user_id == undefined) {
        this.$dialog
          .confirm({
            title: "提示",
            message: "当前还未登录",
          })
          .then(() => {
            this.$router.push("/login");
          });
      } else {
        this.$dialog
          .confirm({
            title: "提示",
            message: "确认购买吗？",
          })
          .then(() => {
            this.$router.push({
              path: "/buy",
              query: { ordernum: OrderNum },
            });
          });
      }
    },
  },
  created() {
    this.orderid = this.$route.query.orderid;
    this.productid = this.$route.query.cid;
    this.getdetail();
    this.getmodule();
  },
};
</script>

<style scoped>
.shop_info {
  background-color: #f5f5f5;
  padding: 3px;
}
.info {
  display: flex;
  flex-wrap: wrap;
}
.icon {
  font-size: 20px;
}
.icon_box {
  height: 37px;
  line-height: 37px;
}
.btn {
  width: 140px;
  height: 30px;
}
.bottom {
  width: 100%;
  border: 1px solid #eeeeee;
  position: fixed;
  bottom: 0;
  left: 0;
}
</style>